<template>
    <div class="header">
        <div class="title">新建直播间</div>
        <el-button size="small" :icon="ArrowLeftBold">返回</el-button>
    </div>

    <div>
        <el-form class="" label-position="top">
            <div class="form-item-box">
                <el-form-item label="直播间标题">
                    <el-input class="bg-input" v-model="addRoomForm.roomTitle" :maxlength="16" show-word-limit></el-input>
                </el-form-item>
            </div>
            
            <div class="form-item-box">
                <el-form-item label="开播平台">
                    <el-radio-group v-model="addRoomForm.platform" size="small">
                        <el-radio-button label="抖音" value="douyin" round/>
                    </el-radio-group>
                </el-form-item>
            </div>
            
            <div class="form-item-box">
                <el-form-item label="直播类型">
                    <el-radio-group v-model="addRoomForm.liveType" size="small">
                        <el-radio-button label="本地生活" value="life" round/>
                        <el-radio-button label="电商" value="retailer" round/>
                    </el-radio-group>
                </el-form-item>
            </div>

            <div class="form-item-box">
                <el-form-item label="带货品类">
                    <el-radio-group v-model="addRoomForm.goodsType" size="small">
                        <el-radio-button label="美食" value="goods" round/>
                    </el-radio-group>
                </el-form-item>
            </div>
           
            <div class="form-item-box">
                <el-form-item label="直播方式">
                    <el-radio-group v-model="addRoomForm.liveWays" size="small">
                        <el-radio-button label="数字人直播" value="digital" round/>
                    </el-radio-group>
                </el-form-item>
            </div>
            
            <!-- <el-form-item> -->
                <el-row justify="end">
                    <el-button type="primary" @click="getLoginCode">账号授权</el-button>
                </el-row>
            <!-- </el-form-item> -->
        </el-form>
    </div>
    <el-dialog v-model="dialogVisible" title="扫码授权" width="500">
        <div class="qrcode-container">
            <img :src="qrcodeUrl" width="200px" height="200px" alt="">
        </div>
    </el-dialog>
</template>

<script setup>
import { ipcApiRoute } from '@/api/main';
import { ipc } from '@/utils/ipcRenderer';
import { ref, reactive, watch, toRaw } from 'vue'
import {  getLoginInfo, getLifeGoods } from '@/api/douyin'
import { ArrowLeftBold } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router';

const router = useRouter();

const videoRef = ref()  
const dialogVisible = ref(false)
const qrcodeUrl = ref('')
const timer = ref(null)
const addRoomForm = reactive({
    roomTitle: '',
    liveType: 'life',
    platform: 'douyin',
    goodsType: 'goods',
    liveWays: 'digital'
})

const newWindiw = reactive(
    {
        type: 'web',
        content: '',
        windowName: 'window-login',
        windowTitle: '抖音生活'
    },
)
const getLoginCode = async () => {
    // location.href = "https://buyin.jinritemai.com/mpa/account/login"
    // const rst = await getLoginInfo()
    // console.log('[createWindow] rst:', rst);
    const loginUrlObj = {
        "life": "https://eos.douyin.com/livesite/login",
        "retailer": "https://buyin.jinritemai.com/mpa/account/login"
    }
    newWindiw.content = loginUrlObj[addRoomForm.liveType]
    createWindow()
    // try {
    //     const { data } = await getLoginQrcode()
    //     console.log("getLoginCode----", data)
    //     qrcodeUrl.value = `data:image/jpg;base64,${data.qrcode}`
    //     dialogVisible.value = true

    //     timer.value = setInterval(async () => {
    //         const rst = await checkLoginStatus(data.token)
    //         console.log("checkLoginStatus----", rst)
    //         if (['expired', 'confirmed'].includes(rst.data.status)) {
    //             // expired---过期，  confirmed--
    //             dialogVisible.value = false
    //             clearInterval(timer.value)
    //             if (rst.data.status === 'confirmed') {
    //                 console.log("rst.redirect_url", rst.data.redirect_url)
    //                 newWindiw.content = rst.data.redirect_url
    //                 createWindow()
    //             }
    //         }
    //     }, 3000)
    // } catch (error) {

    // }
}

// 打开新窗口
const createWindow = () => {
    ipc.invoke(ipcApiRoute.createWindow, toRaw(newWindiw)).then(id => {
        checkLoginStatus()
    })
}

// 检查登录状态
const checkLoginStatus = () => {
    timer.value = setInterval(async () => {
        const rst = await getLoginInfo()
        console.log('[checkLoginStatus] rst:', rst);

        if (rst.status_code === 0) {
            clearInterval(timer.value)
            console.log('[checkLoginStatus] rst:', rst);
            closeLoginWindow()
            router.push({ name: 'LiveGoods', params: { liveType: addRoomForm.liveType } })
           
        }
    }, 3000)
}

// 关闭登录窗口
const closeLoginWindow = () => {
    ipc.invoke(ipcApiRoute.closeWindow, newWindiw.windowTitle)
}
</script>

<style lang="less" scoped>

.header{
    width: 100%;
    height: 50px;
    background-color: @bg-default;
    color: @font-color-default;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding-right: 20px;

    .title{
        flex:1;
        flex-shrink: 0;
        color: @color-white;
        text-align: center;
    }
}

.form-item-box{
    padding: 10px 20px;
    background-color: @bg-default;
    margin-bottom: 10px;

    :deep(.el-form-item__label){
        color: @color-white;
    }

    :deep(.el-input__wrapper){
        background-color: transparent;
    }

    :deep(.el-input__inner){
        color: @color-white;
    }

    :deep(.el-input__count-inner){
        background-color: transparent;
        color: @color-white;
    }
}
</style>